<template>
  <div>
    <table>
      <tr>
        <td>音乐名称:</td>
        <td><el-input v-model="MusicName"></el-input> </td>
        <td>歌手名称:</td>
        <td><el-input v-model="Singer"></el-input> </td>
      </tr>
    </table>
    <el-button @click="search()">搜索</el-button>

    <h1>查询结果</h1>
    <table>
      <thead>
      <tr>
        <th>音乐名称</th>
        <th>歌手名称</th>
      </tr>
      </thead>

      <tbody>
      <tr v-for="(arr,index) in music" :key="index">
        <td>{{arr.MusicName}}</td>
        <td>{{arr.Singer}}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Find",
  data(){
    return{
      MusicName:"",
      Singer:"",
      music:[0]
    }
  },
  methods:{
    search(){
      axios({
        methods: "get",
        url:"http://localhost:3000/search",
        params:{
          MusicName:this.MusicName,
          Singer:this.Singer,
        }
      }).then((response)=>{
        this.music.push(response.data[0]);
      }).catch((err)=>{
        console.log(err);
      });
    }
  }
}
</script>

<style scoped>

</style>